<template>
  <Draggable
    :v-model="list"
    class="dragArea list-group"
    tag="div"
    :group="group"
    v-bind="{ ...dragOptions, ...$attrs }"
    :item-key="itemKey"
  >
    <transition-group>
      <template #item="item">
        <div :class="{ 'item-drag': item.element.draggable }" :data-el="item.element.draggable">
            <slot name="item" v-bind="item"> </slot>
        </div>
        </template>
    </transition-group>
  </Draggable>
 
</template>

<script>
import Draggable from 'vuedraggable'
// import { useVModel } from '@vueuse/core'

export default {
  name: 'DraggableGroup',
  components: { Draggable },
  props: {
    blocks: {
      type: Array,
      default: () => []
    },
    drag: {
      type: Boolean,
      default: false
    },
    itemKey: {
      type: String,
      default: '_vid'
    },
    group: {
      type: Object,
      default: () => ({ name: 'components' })
    },
    fallbackClass: String
  },
  data() {
      return {
          list: this.blocks,
          isDrag: false,
      }
  },
  computed: {
    dragOptions() {
        return {
            animation: 200,
            disabled: false,
            scroll: true,
            ghostClass: 'ghost'
        }
    }
  },
  watch: {
      blocks(v) {
          console.log(v)
        this.list = v;
      }
  },
  mounted() {
      
  },
}
//   setup(props, { emit }: SetupContext) {
//     const state = reactive({
//       list: useVModel(props, 'moduleValue', emit),
//       isDrag: useVModel(props, 'drag', emit)
//     })

//     const dragOptions = computed(() => ({
//       animation: 200,
//       disabled: false,
//       scroll: true,
//       ghostClass: 'ghost'
//     }))

//     return {
//       ...toRefs(state),
//       dragOptions
//     }
//   }
// })
</script>

<style lang="scss" scoped>
// @import './func.scss';

.flip-list-move {
  transition: transform 0.5s;
}

.no-move {
  transition: transform 0s;
}

.ghost {
  background: #c8ebfb;
  opacity: 0.5;
}

.list-group {
  height: 100%;
  min-height: 40px;

  // &.isDrag div[data-draggable='true'] {
  //   padding: 2px 0;
  // }

  &.isDrag:not(.no-child) :deep(.list-group-item.has-slot) {
    @include showContainerBorder;
  }
}
</style>
